<template>
  <el-dialog
    v-model="state.dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="true"
    width="80%"
    :append-to-body="true"
    custom-class="my-dialog"
    top="5vh"
  >
    <template #header>
      <div class="my-header">
        <div class="title-hr"></div>
        <div>
          <span class="title-top">试算详情</span>
          {{ state.title }}
        </div>
      </div>
    </template>
    <div class="dialog-container">
      <div class="check-box">
        <span>试算方案:</span>
        <el-checkbox-group
          v-model="state.trialIds"
          v-for="(item, index) in state.trialData"
          :key="index"
          @change="handleChangeTryScheme"
        >
          <el-checkbox :label="item.trialName" />
        </el-checkbox-group>
      </div>
      <div class="top-ul-box">
        <div class="ul-box">
          <div
            v-for="(item, index) in state.showBgItem"
            :key="index"
            :class="['ul-item', state.flagItem == index ? 'clickBg' : '']"
            @click="handleClickShow(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="echarts-table-box">
        <div class="echarts-box" v-show="state.tableShow">
          <SkDispatchChart height="100%" :x-labels="state.sysTimes" :servers="state.servers" />
        </div>
        <div
          :class="['table-box', state.tableShow ? '' : 'table-box-show']"
          v-show="!state.showTable"
        >
          <el-table :data="state.servers[0]?.ccResult" border>
            <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column prop="jp" label="净雨值" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="入库流量（实测/预报）"
              show-overflow-tooltip
              align="center"
            >
              <template #default="{ row }">
                {{ `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}` }}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="出库流量（实测/预报）"
              show-overflow-tooltip
              align="center"
            >
              <template #default="{ row }">
                {{ `${row.rotq !== '' ? row.rotq : '--'}/${row.otq !== '' ? row.otq : '--'}` }}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="水库水位（实测/预报）"
              show-overflow-tooltip
              align="center"
            >
              <template #default="{ row }">
                {{ `${row.rzr !== '' ? row.rzr : '--'}/${row.zr !== '' ? row.zr : '--'}` }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="feature-box">
        <div class="title">特征统计</div>
        <el-table :data="state.servers" style="width: 100%" height="100px">
          <!-- <el-table-column prop="date" label="预报模型" align="center" /> -->
          <el-table-column prop="fcV" label="洪峰流量" align="center" />
          <el-table-column prop="fcMxt" label="峰现时间" align="center" />
          <el-table-column prop="fcMxotq" label="最大出流" align="center" />
          <el-table-column prop="flCoef" label="产流系数" align="center" />
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import emitter from '@/utils/bus'

const state = reactive({
  tryRes: [],
  trialData: [],
  trialIds: [],
  sourceServers: [],
  waterFlag: 1,
  flagItem: 0,
  showBgItem: ['图', '混', '表'],
  showTable: true,
  tableShow: true,
  servers: [],
  //时间
  sysTimes: []
})
// const ruleFormRef = ref(null);

function handleOpenDetails(item) {
  console.log(item, '列表')
  // 特征统计
  // state.tryRes = item.result
  state.dialogVisible = true
  // 试算方案
  state.trialData = item.trialList
  state.trialData.forEach((e) => {
    state.trialIds.push(e.trialName)
  })
  let res = item.result
  console.log(item.result, '结构')
  if (res.length) {
    state.servers = res.map((e) => {
      return {
        ccResult: e.result,
        scName: e.trialName,
        ...e
      }
    })
    state.sourceServers = state.servers
  }
  // state.servers = item.result
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}
defineExpose({ handleOpenDetails })

// 关闭弹框的回调
function handleClose() {
  state.dialogVisible = false
}
//
function handleChangeTryScheme(arr) {
  console.log(arr, '点击')
  // console.log(state.servers, '点击1')

  const filteredServers = state.sourceServers.filter((child) => arr.includes(child.scName))
  // let array = []
  // state.servers = state.sourceServers
  // state.servers.forEach((child) => {

  //   arr.forEach((e) => {
  //     if (child.scName == e) {
  //       array.push(child)
  //     }
  //   })
  // })
  console.log(filteredServers, '点击3')
  state.servers = filteredServers
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}

//展开
function handleClickShow(val) {
  state.flagItem = val
  if (val == 0) {
    // 图
    state.showTable = true
    state.tableShow = true

    nextTick(() => {
      emitter.emit('initEcharts')
    })
  } else if (val == 1) {
    // 混
    state.showTable = false
    state.tableShow = true
  } else {
    //表
    state.showTable = false
    // 将图关闭
    state.tableShow = false
  }
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
}
</script>
<style lang="less">
.el-dialog.my-dialog {
  .el-dialog__body {
    padding: 5px 20px !important;
  }
}
</style>
<style lang="less" scoped>
.dialog-container {
  overflow-y: auto;
  height: 83vh;
  .check-box {
    height: 50px;
    align-items: center;
    display: flex;
    span {
      margin-right: 20px;
    }
    .el-checkbox-group {
      margin-right: 10px;
    }
  }
  .top-ul-box {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    // width: 100%;
    .ul-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 30px;
      // width: 100%;
      border-radius: 20px;

      background-color: rgba(1, 84, 219, 0.3);
      .ul-item {
        width: 30px;
        height: 100%;

        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        // background-color: #0154db;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          background-color: #0154db;
          color: wheat;
        }
      }
      .clickBg {
        background-color: #0154db;
      }
    }
  }
  .echarts-table-box {
    display: flex;
    width: 100%;
    height: 600px;
    // height: calc(100% - 120px);

    position: relative;

    .echarts-box {
      flex: 1;
      min-width: 49%;
      height: 100%;
      // height: calc(100%);
      // padding: 5px;
      position: relative;
      .show-btn {
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
      }
    }
    .table-box {
      width: 50%;
      margin-left: 1%;
      position: relative;
      .el-table {
        height: 100%;
      }
      .hide-btn {
        cursor: pointer;
        position: absolute;
        height: 20px;
        top: 10px;
        right: 0;
        z-index: 10;
      }
    }
    .table-box-show {
      width: 100% !important;
    }
  }
  .feature-box {
    margin-top: 20px;
    .title {
      color: #409eff;
      margin: 5px 0 5px 20px;
    }
  }
}

.el-dialog {
  .my-header {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    height: 35px;
    border-bottom: 2px solid #eee;
    font-size: 21px;
    .title-hr {
      height: 18px;
      border: #4fc0f1 2px solid;
      margin-right: 10px;
    }
    .title-top {
      color: #4fc0f1;
    }
  }
}
</style>
